<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>查询记录</el-breadcrumb-item>
      <el-breadcrumb-item>查询支部缴费记录</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
      <!-- 搜索 添加 -->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input
            placeholder="请输入人名"
            v-model="query.name"
            clearable
          ></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="querybyzhibu">查询</el-button>
        </el-col>
        <el-col :span="3">
          <div class="export">
            <el-button
              @click="exportExcel"
              size="primary"
              type="success"
              >导出</el-button
            >
          </div>
        </el-col>
      </el-row>
      <!-- 用户列表区域 -->
      <el-table id="rebateSetTable" :data="paylist" border stripe v-loading="loading">
        <!-- stripe: 斑马条纹
        border：边框-->
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column
          prop="payedTime"
          label="缴费时间"
        ></el-table-column>
        <el-table-column
          prop="due"
          label="缴费金额"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  data() {
    return {
      //加载
      loading:false,
      // 获取用户列表查询参数对象
      query: {
        name: "",
      },

      //缴费列表
      paylist: [],

    };
  },
  created() {
    
  },
  methods: {

    async querybyzhibu() {
      console.log(this.query);
      this.loading=true;
      const { data: res } = await this.$http.get("searchPersonalHistory", {
        params: this.query,
      });
      console.log(res);
      this.loading=false;
      this.paylist = res;
    },

    //添加用户之前获取初始化党支部下拉框的数据
    async getBranchs() {
      const { data: res } = await this.$http.get("searchAllBranch");
      console.log(res);
      this.branch = res;
    },

    //导出表格为Excel
    exportExcel() {
      let wb = XLSX.utils.table_to_book(
        document.querySelector("#rebateSetTable")
      );
     
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          "缴费记录.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
};
</script>

<style lang="less" scoped>
</style>
